<template>
	<view class="page">
		<button class="bt_1" @click="Go_aixinguanlian">爱心关联</button>
		<button class="bt_1" @click="Go_qinaiguanlian">亲爱关联</button>
		<uni-popup ref="popup" type="center">
			<view class="popup-wrap">
				<view class="popup-container">
					<view style="background-color: #fff;width: 100%;">
						<view class="phonenumber">
							<span class="sp_1">姓名 <span class="sp_2">*</span> </span>
							<input type="text" class="inp_1" placeholder="请输入姓名">
						</view>
						<view class="phonenumber">
							<span class="sp_1">手机号 <span class="sp_2">*</span> </span>
							<input type="text" class="inp_1" placeholder="请输入手机号">
						</view>
						<view class="phonenumber">
							<span class="sp_1">感染与否 <span class="sp_2">*</span> </span>
							<view class="select">
								<uni-data-select v-model="value" :localdata="range" @change="change"
									placeholder="感染与否"></uni-data-select>
							</view>
						</view>
						<view class="phonenumber">
							<span class="sp_1">性别<span class="sp_2">*</span> </span>
							<input type="text" class="inp_1" placeholder="请输入性别">
						</view>
						<view class="phonenumber">
							<span class="sp_1">年龄<span class="sp_2">*</span> </span>
							<input type="text" class="inp_1" placeholder="请输入年龄">
						</view>
						<view class="phonenumber">
							<span class="sp_1">当前地址<span class="sp_2">*</span> </span>
							<input type="text" class="inp_1" placeholder="请输入地址">
						</view>
						   <button class="bt_1" style="width: 50%;" @click="baocun">保存</button>
					</view>

				</view>
                 
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value: '',
				range: [{
						value: 0,
						text: "否"
					},
					{
						value: 1,
						text: "是"
					},
				],
			}
		},
		// this.$refs.popup.close()
		// this.$refs.popup.open('center')
		methods: {
			change(e) {
				console.log("e:", e);
			},
			//保存信息
			baocun(){
				
			},
			//跳转爱心关联
			Go_aixinguanlian() {
				if (this.show === true) {
					this.$refs.popup.open('center')
				} else {
					uni.navigateTo({
						url: '/page_jiankangdangan/XBGL_01/XBGL_01'
					})
				}
			},
			//跳转亲爱关联
			Go_qinaiguanlian() {
				if (this.show === true) {
					this.$refs.popup.open('center')
				} else {
					uni.navigateTo({
						url: '/page_jiankangdangan/QAGL/QAGL'
					})
				}
			}
		},
		onLoad() {
			if (this.show === true) {
				this.$refs.popup.open('center')
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: auto;

		.bt_1 {
			width: 622rpx;
			height: 98rpx;
			background: #1677FF;
			margin: 200rpx auto 20rpx;
			font-size: 36rpx;
			font-family: Source Sans Pro, Source Sans Pro;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}

		.popup-wrap {
			width: 615.38rpx;
			height: 1200rpx;
			padding: 42rpx;
			box-sizing: border-box;
			position: relative;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.popup-container {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;

				.phonenumber {
					width: 686rpx;
					height: 112rpx;
					border-bottom: 1rpx solid #E7E7E7;
					margin-left: 32rpx;

					.sp_1 {
						display: inline-block;
						margin-top: 32rpx;
						font-weight: 400;
						width: 200rpx;
						height: 48rpx;
						float: left;
						font-size: 32rpx;
						line-height: 48rpx;

						.sp_2 {
							color: red;
						}
					}

					.inp_1 {
						float: left;
						height: 70rpx;
						margin-top: 20rpx;
						border-radius: 10rpx;
						padding-left: 10rpx;
						border: 1rpx solid #e5e5e5;
					}

					.select {
						width: 350rpx;
						float: left;
						margin-top: 25rpx;
					}

				}
			}
		}
	}
</style>